<%--
  Created by IntelliJ IDEA.
  User: lijincheng
  Date: 2021/5/20
  Time: 5:10 下午
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <link href="/css/font-awesome.min.css" rel="stylesheet">
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/order/css.css" rel="stylesheet">

    <script src="/js/jquery-3.5.1.js" type="text/javascript"></script>

    <script src="/js/bootstrap.min.js" type="text/javascript"></script>
</head>
<body>
<div style="width: 100%">
    <p>用户ID：${user.UCode}</p>
    <p>用户名：<span id="now_user_name">${user.UName}</span> <a href="javascript:open_name_div()"><i
            class="fa fa-edit "></i></a></p>
    <p>手机号：<span id="now_user_phone">${user.UPhone}</span> <a href="javascript:open_phone_div()"><i
            class="fa fa-edit "></i></a></p>
    <p>邮 箱：<span id="now_user_email">${user.UEmail}</span> <a href="javascript:open_email_div()"><i
            class="fa fa-edit "></i></a></p>
</div>
<div class="shade">
</div>
<div class="edit-user-info card" id="edit-name-div">
    <div class="col-xs-12 shade_colse">
        <a style="font-size: 20px;margin-right: 20px" href="javascript:close_name_div()">x</a>
    </div>
    <div class="nav shade_content_div" style="margin-top: -5px">
        <div class="col-xs-12 shade_from">
            <form action="" method="post">
                <div class="col-xs-12">
                    <input class="input_style" type="text" name="" id="edit_user_name" value=""
                           placeholder="&nbsp;&nbsp;请输入您的新用户名"/>
                </div>
                <div class="col-xs-12">
                    <input class="btn_remove" type="button" onclick="javascript:close_name_div()"
                           value="取消"/>
                    <input type="button" class="sub_set" onclick="edit_name_button()" value="提交"/>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="edit-user-info card" id="edit-phone-div">
    <div class="col-xs-12 shade_colse">
        <a style="font-size: 20px;margin-right: 20px" href="javascript:close_phone_div()">x</a>
    </div>
    <div class="nav shade_content_div" style="margin-top: -5px">
        <div class="col-xs-12 shade_from">
            <form action="" method="post">
                <div class="col-xs-12">
                    <input class="input_style" type="" name="" id="edit_user_phone" value=""
                           placeholder="&nbsp;&nbsp;请输入您的新手机号"/>
                </div>
                <div class="col-xs-12">
                    <input class="btn_remove" type="button" onclick="javascript:close_phone_div()"
                           value="取消"/>
                    <input type="button" class="sub_set" onclick="edit_phone_button()" value="提交"/>
                </div>
            </form>
        </div>
    </div>
</div>
<div class="edit-user-info card" id="edit-email-div">
    <div class="col-xs-12 shade_colse">
        <a style="font-size: 20px;margin-right: 20px" href="javascript:close_email_div()">x</a>
    </div>
    <div class="nav shade_content_div" style="margin-top: -5px">
        <div class="col-xs-12 shade_from">
            <form action="" method="post">
                <div class="col-xs-12">
                    <input class="input_style" type="" name="" id="edit_user_email" value=""
                           placeholder="&nbsp;&nbsp;请输入您的新邮箱"/>
                </div>
                <div class="col-xs-12">
                    <input class="btn_remove" type="button" onclick="javascript:close_email_div()"
                           value="取消"/>
                    <input type="button" class="sub_set" onclick="edit_email_button()" value="提交"/>
                </div>
            </form>
        </div>
    </div>
</div>
</body>

<script src="/js/jquery.min.js"></script>
<script>
    $(function () {
        $(".shade").hide();
        $("#edit-email-div").hide();
        $("#edit-phone-div").hide();
        $("#edit-name-div").hide();
    });

    function open_name_div() {
        $(".shade").show();
        $("#edit-name-div").show();
    }

    function open_phone_div() {
        $(".shade").show();
        $("#edit-phone-div").show();
    }

    function open_email_div() {
        $(".shade").show();
        $("#edit-email-div").show();
    }

    function close_name_div() {
        $("#edit-name-div").hide();
        $(".shade").hide();
    }

    function close_phone_div() {
        $("#edit-phone-div").hide();
        $(".shade").hide();
    }

    function close_email_div() {
        $("#edit-email-div").hide();
        $(".shade").hide();
    }

    function edit_name_button() {
        var name = $("#edit_user_name").val();
        if (name == null) {
            alert("输入不能为空");
            return;
        }
        $.ajax({
            async: true,
            type: "POST",
            data: {"name": name},
            url: "/user/editName",
            success: function (data) {
                if (data.code == 0) {
                    $("#now_user_name").text(name);
                    close_name_div();
                } else {
                    alert(data.message);
                }
            }
        });
    }

    function edit_phone_button() {
        var phone = $("#edit_user_phone").val();
        if (phone == null) {
            alert("输入不能为空");
            return;
        }
        $.ajax({
            async: true,
            type: "POST",
            data: {"phone": phone},
            url: "/user/editPhone",
            success: function (data) {
                if (data.code == 0) {
                    $("#now_user_phone").text(phone);
                    close_phone_div();
                } else {
                    alert(data.message);
                }
            }
        });
    }

    function edit_email_button() {
        var email = $("#edit_user_email").val();
        if (email == null) {
            alert("输入不能为空");
            return;
        }
        $.ajax({
            async: true,
            type: "POST",
            data: {"email": email},
            url: "/user/editEmail",
            success: function (data) {
                if (data.code == 0) {
                    $("#now_user_email").text(email);
                    close_email_div();
                } else {
                    alert(data.message);
                }
            }
        });
    }
</script>
</html>
